<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <!-- 头部 -->
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
        background: isHeadBack ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0)',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#EEEEEE"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">我的积分</view>
    </view>
    <!-- 主体 -->
    <view class="top">
      <view class="top_num">{{ userInfo.integral }}</view>
      <view class="top_text">我的积分</view>
    </view>

    <view class="box">
      <view class="box_top">
        <view class="box_top_data">
          <view class="box_top_data_Sel" @click="show1 = true">
            {{ year }}年{{ month }}月
            <u-icon name="arrow-down-fill" color="#FFFFFF" size="10"></u-icon>
          </view>
          <view class="box_top_data_Sel" @click="show = true">
            {{ defaultValue }}
            <u-icon name="arrow-down-fill" color="#FFFFFF" size="10"></u-icon>
          </view>
        </view>
        <view class="box_top_text">
          <view class="box_top_text_item">获得：{{ sr }}</view>
          <view class="box_top_text_item">支出：{{ zc }}</view>
        </view>
      </view>

      <view class="box_cont">
        <scroll-view
          class="pop_view"
          :style="{
            height: scrollHeihgt + 'px',
          }"
          :scroll-y="true"
          @scroll="scroll"
          @scrolltolower="scrolltolower"
        >
          <view
            class="pop_view_item"
            v-for="(item, index) in list"
            :key="index"
          >
            <view class="pop_view_item_left">
              <view class="pop_view_item_left_title">{{ item.describe }}</view>
              <view class="pop_view_item_left_time">{{
                item.create_time
              }}</view>
            </view>
            <view
              class="pop_view_item_right"
              :class="item.pm == 0 ? 'pop_view_item_right1' : ''"
              >{{ item.pm == 0 ? "-" + item.price : item.price }}</view
            >
          </view>

          <!-- <view class="pop_view_bottom">123</view> -->
        </scroll-view>
      </view>
    </view>

    <!-- 选择 -->
    <u-action-sheet
      :actions="sexList"
      cancelText="取消"
      @select="selectClick"
      :show="show"
      @close="show = false"
    ></u-action-sheet>
    <!-- 时间选择器 -->
    <u-datetime-picker
      :show="show1"
      v-model="value1"
      mode="year-month"
      :formatter="formatter"
      @confirm="confirm"
      @cancel="cancel"
    ></u-datetime-picker>

    <floatingBall></floatingBall>
  </view>
</template>
        
        <script>
export default {
  components: {},

  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      isHeadBack: false,
      scrollHeihgt: 0,
      show: false,
      sexList: [
        {
          name: "所有",
          value: "-1",
        },
        {
          name: "获得",
          value: "1",
        },
        {
          name: "支出",
          value: "0",
        },
      ],
      defaultValue: "所有",
      defaultPrice: "-1",
      show1: false,
      value1: Number(new Date()),
      year: "",
      month: "",
      userInfo: {},
      sr: "",
      list: [],
      zc: "",
      time: "",
      windowHeihgt: 0,
      page:1,
      last_page:1,
    };
  },

  created() {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    this.time = year + "-" + month;
    if (month < 10) {
      month = "0" + month;
    }
    this.year = year;
    this.month = month;
    // console.log(new Date().toLocaleString());

    this.getPointLog();
  },
  methods: {
    getHeight() {
      const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
      this.windowHeihgt =
        statusBarHeight.windowHeight - statusBarHeight.statusBarHeight;
      this.statusBarHeight = statusBarHeight.statusBarHeight;

      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select(".head").fields({
          size: true,
        });
        query.select(".top").fields({
          size: true,
        });
        query.select(".box_top").fields({
          size: true,
        });

        query.exec((data) => {
          let sum = 0;
          data.forEach((item) => {
            sum += item.height;
          });
          this.height = data[0].height;
          this.scrollHeihgt =
            this.windowHeihgt - data[1].height - data[2].height+62;
          // console.log(data, "各种高度");
          // console.log(this.scrollHeihgt, "滚动区高度");
        });
      });
    },
    scroll() {},
    scrolltolower(){
      console.log(this.page,'当前页')
      console.log(this.last_page,'返回页')
      if(this.page == this.last_page){

      } else {
        this.page++
        this.getPointLog()
      }
      // console.log('到底了')
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    selectClick(a) {
      this.defaultValue = a.name;
      this.defaultPrice = a.value;
      this.page = 1
      this.list = []
      this.show = false;
      this.getPointLog();
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      }
      if (type === "month") {
        return `${value}月`;
      }
      return value;
    },
    confirm(value) {
      let date = new Date(value.value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      // console.log(year, month, "qqqqqqq");
      this.year = year;
      this.month = month;
      this.show1 = false;
      this.time = this.year + "-" + this.month;
      this.page = 1
      this.list = []
      this.getPointLog();
    },
    cancel() {
      this.show1 = false;
    },
    getPointLog() {
      this.$http
        .userPoint_log_all({ time: this.time, type: this.defaultPrice,page:this.page })
        .then((res) => {
          // console.log(res.data, "我的积分");
          this.userInfo = res.data.userInfo;
          this.sr = res.data.sr;
          this.list = this.list.concat(res.data.list.data);
          // console.log(this.list)
          this.zc = res.data.zc;
          this.last_page = res.data.list.last_page
          this.getHeight()
          
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
  },
};
</script>
        
<style scoped lang="scss">
.content {
  // background: #F7F8FA;
  box-sizing: border-box;
  // background: url("/static/images/my/pic_wdjf_bwijing.png") no-repeat;
  // background-size: 100% auto;
  // background-attachment: fixed;

  z-index: -10;
  display: flex;
  flex-direction: column;
}
.scroll_view {
  height: 100%;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #ffffff;
  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #ffffff;
    font-size: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
  }
}
.top {
  background: linear-gradient(312deg, #ffbb7b 0%, #ff9523 100%);
  width: 100%;
  height: 490rpx;
  position: fixed;
  top: 0;
  left: 0;
  .top_num {
    font-size: 80rpx;
    color: #ffffff;
    text-align: center;
    margin-top: 178rpx;
  }
  .top_text {
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
    margin-top: 24rpx;
  }
}
.box {
  position: fixed;
  top: 370rpx;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #111111;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  margin-top: 52rpx;
  z-index: 10;
  //   overflow: hidden;
  display: flex;
  flex-direction: column;

  .box_top {
    width: 100%;
    height: 172rpx;
    background: #272727;
    padding: 32rpx 30rpx;
    box-sizing: border-box;
    .box_top_data {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 34rpx;
      color: #ffffff;
      .box_top_data_Sel {
        display: flex;
        align-items: center;
        .u-icon {
          position: relative;
          top: 1rpx;
          margin-left: 9rpx;
        }
      }
    }
    .box_top_text {
      display: flex;
      align-items: center;
      margin-top: 16rpx;
      color: #888888;
      .box_top_text_item {
        margin-right: 50rpx;
      }
    }
  }
  .box_cont {
    flex: 1;
    // flex-grow: 1;
    .pop_view {
      padding: 32rpx 30rpx;
      box-sizing: border-box;
      // overflow-y: scroll;
      // height: 1000rpx;
      .pop_view_item {
        height: 162rpx;
        background: #272727;
        border-radius: 24rpx;
        padding: 32rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32rpx;
        .pop_view_item_left {
          flex: 1;
          .pop_view_item_left_title {
            font-size: 30rpx;
            color: #ffffff;
          }
          .pop_view_item_left_time {
            margin-top: 16rpx;
            font-size: 26rpx;
            color: #666666;
          }
        }
        .pop_view_item_right {
          font-size: 32rpx;
          color: #55b877;
        }
        .pop_view_item_right1 {
          color: #ee6060;
        }
      }
      .pop_view_bottom {
        height: 100rpx;
      }
    }
  }
}
</style>